<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距？所有元素具备边框以外距离，四个 上下左右
			margin外边框属性：1个属性值  只支持左右边距
			                布局，只支持左右推动效果
							解决方案：行转块！
			常用margin属性：两个属性值    居中				
			*/
		span{
			border:1px solid red;
			/* margin外边距属性：1个属性值 */
			margin: 300px;         /* 上下左右 上下效果没有 */
		    /* margin外边框属性:两个属性值 上下 左右*/
			margin: 100px 200px;
			/* margin外边框属性:三个属性值 上下 左右*/
			margin: 100px 200px 300px 400px;
			/* margin外边框属性:三个属性值 上 右 下 左*/
			margin: 100px 200px 300px 400px;
			/* 常用属性：自适应居中 */
			/*外边距问题2 外边距合并问题 
			 上下元素都存在外边距
			 外边距垂直和开，最大外边距为主，怎么解决
			 推荐：1.margin设置一个值 上下会垂直，去掉一个上下元素其中上，下外边距，重新计算
			 */
		}	
		#parent{
			width: 200px;
			height:200px;
			background:#ff1818;
			margin-bottom: 30px;
		}
		#child{
			 margin-top: 30px;
			width: 200px;
			height:200px;
			background:#fff239
		}
		</style>
	</head>
	<body>
		 <div id="parent"></div>
		<div id="child"></div>
	</body>
</html>
<!-- ul li
     from input
     table tr td
	 p
 -->